<template>
  <div>
    <el-row>
      <el-col :span="8">
        <el-card class="box-card">
          <div class="user">
            <img src="@/assets/1.jpg">
            <div class="userinfo">
              <p class="name">Admin</p>
              <p class="access"> 超级管理员 </p>
            </div>
          </div>
          <div class="login-info">
            <p>上次登录时间:<span>2024-1-2</span></p>
            <p>上次登陆地点:<span>上海</span></p>
          </div>
        </el-card>

<!--        <el-card class="box-card" style="margin-top: 20px">
          <el-table
              :data="tableData"
              stripe
              style="width: 100%">
            <el-table-column
                prop="date"
                label="日期"
                width="180">
            </el-table-column>
            <el-table-column
                prop="name"
                label="姓名"
                width="180">
            </el-table-column>
            <el-table-column
                prop="address"
                label="地址">
            </el-table-column>
          </el-table>

        </el-card>-->


      </el-col>
<!--      <el-col :span="16">

        <el-card class="box-card system_bulletin">
          <div slot="header" class="system_title">
            <span>系统公告</span>
          </div>
          <div v-for="o in 4" :key="o" class="text item">
            {{ '列表内容 ' }}
          </div>
        </el-card>

      </el-col>-->
    </el-row>
  </div>

</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "FirstPage",
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  }
}
</script>

<style lang="less" scoped>
.user {
  padding-bottom: 20px;
  border-bottom: 1px solid #999;
  display: flex;
  align-items: center;

  img {
    margin-left: 40px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
  }

  .userinfo {
    margin-left: 40px;

    .name {
      font-size: 32px;
      margin-bottom: 10px;
    }

    .access {
      color: #999;
      margin-top: 0px;
    }
  }
}

.login-info {
  p {
    font-size: 14px;
    color: #999999;
    line-height: 28px;

    span {
      color: #333333;
      margin-left: 20px;
    }
  }
}

.system_bulletin {
  .system_title {
    font-size: 22px;
    color: #000;
  }
}


</style>
